document.addEventListener('DOMContentLoaded', function() {
    const toggleBtn = document.getElementById('toggleBtn');

    // 从 storage 中获取当前状态
    chrome.storage.local.get(['svgMarkerEnabled'], function(result) {
        const isEnabled = result.svgMarkerEnabled || false;
        updateButtonState(isEnabled);
    });

    // 点击按钮时切换状态
    toggleBtn.addEventListener('click', function() {
        chrome.storage.local.get(['svgMarkerEnabled'], function(result) {
            const newState = !result.svgMarkerEnabled;

            // 更新 storage
            chrome.storage.local.set({ svgMarkerEnabled: newState }, function() {
                if (chrome.runtime.lastError) {
                    console.error('保存状态失败：', chrome.runtime.lastError);
                    return;
                }

                // 更新按钮状态
                updateButtonState(newState);

                // 向当前标签页发送消息
                chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
                    if (chrome.runtime.lastError) {
                        console.error('查询标签页失败：', chrome.runtime.lastError);
                        return;
                    }

                    if (!tabs || tabs.length === 0) {
                        console.error('没有找到活动标签页');
                        return;
                    }

                    chrome.tabs.sendMessage(tabs[0].id, {
                        action: 'toggleMarker',
                        enabled: newState
                    }, function(response) {
                        if (chrome.runtime.lastError) {
                            console.error('发送消息失败：', chrome.runtime.lastError);
                            // 如果 content script 还没有加载，尝试注入
                            chrome.scripting.executeScript({
                                target: { tabId: tabs[0].id },
                                files: ['content.js']
                            }).then(() => {
                                // 重新发送消息
                                chrome.tabs.sendMessage(tabs[0].id, {
                                    action: 'toggleMarker',
                                    enabled: newState
                                });
                            }).catch(err => {
                                console.error('注入脚本失败：', err);
                            });
                        }
                    });
                });
            });
        });
    });
});

function updateButtonState(isEnabled) {
    const toggleBtn = document.getElementById('toggleBtn');
    if (!toggleBtn) {
        console.error('找不到 toggleBtn 元素');
        return;
    }

    if (isEnabled) {
        toggleBtn.textContent = '关闭标记';
        toggleBtn.classList.add('active');
    } else {
        toggleBtn.textContent = '开启标记';
        toggleBtn.classList.remove('active');
    }
}